.wrapper {
    width: 90%;
    margin: 0px auto;
}

.topnav {
    background-color: #363636;

    ul {
        padding-right: 20px;
        display: flex;
        justify-content: flex-end;
        margin-left: 20px;

        li {
            padding: 1rem;

            a {
                // line-height: 60px;

                font-size: 20px;
                color: #dfdadd !important;
                text-decoration: none;

                &:hover {
                    color: #fff !important;

                }

            }
        }

    }
}

.category {
    display: flex;
    align-items: center;

    .logo {
        width: 25%;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .listbar {
        width: 55%;
    }

    ul {
        display: flex;
        margin-left: 0.5rem;

        li {
            padding: 1vw;

            a {
                font-size: 1vw;
                color: #000 !important;
                text-decoration: none;

                &:hover {
                    color: #dfdadd !important;
                }
            }
        }
    }

    .input {

        width: 20%;
        display: flex;
        flex-wrap: wrap;

        input {
            font-size: 30px;
            width: 80%;
            border: 1px solid blue;
        }

        button {
            background: blue !important;
            width: 20%;
            border-left-color: aqua;

            img {
                width: 100%;
                height: 100%;
            }

        }
    }



}

.recommend {


    .topbar {
        display: flex;
        justify-content: space-between;
        line-height: 60px;

        .left {
            h3 {
                display: inline;
            }

            h6 {
                display: inline;
            }
        }

        .right {
            font-size: 30px;
        }
    }

    .goods {
        margin-top: 1rem;
        display: flex;
        flex: 4;

        .item {

            padding: 0rem 2rem;
            transition: all 1.2s;

            img {
                width: 100%;
                height: 75%;
            }

            &:hover {
                transform: scale(1.1);

            }

            .detail {
                height: 25%;
                background-color: gray;
                text-align: center;

                p {
                    text-align: center;
                    font-size: 1.5vw;
                    color: white;


                }

                span {

                    font-size: 1.5vw;
                    color: red;
                }
            }
        }

    }
}

.main {
    margin-top: 2rem;
    background-color: #f1efef;
}

.hotbrand {

    .brands {
        margin-top: 1rem;
        display: flex;
        flex: 4;

        .item {
            padding: 0rem 2rem;
            transition: all 1s;

            img {
                width: 100%;
                height: 100%;
            }

            &:hover {
                transform: translatey(-1rem);

                box-shadow: 18px 8px 5px rgb(201, 200, 200);

            }
        }
    }
}

.livehouse {
    .furniture {
        display: flex;

        .left {
            width: 30%;

            img {
                width: 100%;
                height: 100%;
            }

        }

        .right {
            width: 70%;
            display: flex;


            justify-content: space-evenly;
            align-items: center;
            flex-wrap: wrap;

            .thing {
                width: 15vw;
                height: 40vh;
                text-align: center;
                position: relative;
                overflow: hidden;
                margin: 2px;

                &:hover {
                    .txt {
                        transform: translateY(-45px);
                    }

                    img {
                        transform: scale(1.3);
                    }

                    .mask {
                        opacity: 1;
                    }

                }

                img {
                    width: 100%;
                    height: 100%;
                    transition: all 2s;

                }

                .txt {
                    position: absolute;
                    left: 0px;
                    bottom: -45px;
                    transition: all 2s;
                    color: #fff;

                    h4 {
                        font-size: 0.2vw;
                    }

                    h6 {
                        font-size: 0.3vw;
                    }

                    h5 {
                        font-size: 0.5vw;
                    }


                }

                .mask {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    background-image: linear-gradient(transparent,
                            rgba(0, 0, 0, .6));
                    opacity: 0;
                    transition: all 2s;
                }
            }

        }
    }
}

.footer {
    .contact {
        margin-top: 2rem;
        display: flex;
        flex: 4;
        justify-content: space-evenly;

        .service {
            text-align: center;

            .left {
                display: inline-block;
                width: 7rem;
                height: 7rem;
                border: 1px solid blue;

            }

            .right {
                display: inline-block;
                width: 7rem;
                height: 7rem;
                border: 1px solid green;
            }

            .phone {
                h4 {
                    font-size: 10px;
                }

                h5 {
                    font-size: 10px;
                }
            }

        }


    }
    .copyright{
        text-align: center;
        background-color: #626262;

        ul{
            display: flex;
            flex: 3;
            justify-content: space-evenly;
            
            li{
                color: black;
                h5{
                    line-height: 6rem;

                }
                h3{
                    line-height: 6rem;
                }
            }
        }
        h6{
            line-height: 6rem;
        }
    }
}


